<template>
	<view style="background-color: #eeeeee;">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" v-if="!isFullScreen">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view v-if="!isFullScreen" class="uni-page-head" style="background-color: #000;color:#fff;">
			<image class="controls-play img" @click="pageBack" :style="`${isFullScreen ? 'width:21.56rpx;height:21.56rpx;' : 'width: 18.11rpx;height: 33.29rpx;'}`" mode="aspectFill" src="/static/images/icons/arrow-left_white.png"></image>
			<view style="display: inline-block; flex: 1;text-align: center;color:#fff" :style="`font-size:${isFullScreen ? '12.98rpx' : '28.04rpx'}`">living room</view>
			<image class="controls-play img" @click="pageBack" style="width: 45rpx;height: 40rpx;" mode="aspectFill" src="/static/images/icons/setting_white.png"></image>
		</view>
	
	</view>
  <view class="custom-content" :style="isFullScreen ? 'top: 0' : ''">
    <view style="width: 100%;padding: 0;margin: 0;display: block;z-index: 999!important;">
      <video id="myVideo" 
				:style="{'width': !isFullScreen ? windowWidth : '750rpx', 'height': !isFullScreen ? windowHeight : '375rpx', 'display': 'block'}" 
				src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" 
				@play="onPlay"
				@error="videoErrorCallback"
				@fullscreenchange="onFullScreenChange"
				:controls="false"
			>
			</video>
      <view class="video-control-bar control-bar-1" v-if="!isFullScreen">
        <image src="/static/images/icons/player/play_1.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/player/volume_2.png" style="width: 58.5rpx; height: 58.5rpx"></image> 
        <image src="/static/images/icons/player/speed_1.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/player/hd.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/player/full-screen_1.png" style="width: 58.5rpx; height: 58.5rpx" @click="fullScreen"></image>
      </view>
		<view class="video-control-bar control-bar-2" v-if="!isFullScreen">
        <image src="/static/images/icons/icon-15_1.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_6.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_2.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_3.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_4.png" style="width: 58.5rpx; height: 58.5rpx"></image>
        <image src="/static/images/icons/icon-15_5.png" style="width: 58.5rpx; height: 58.5rpx"></image>
      </view>
		<view class="video-control-bar control-bar-3" v-if="!isFullScreen" >
			<image src="/static/images/icons/control-bar.png" style="width: calc(100vh - 122.08rpx - 100.47rpx - 460rpx); height: 384rpx" mode="aspectFit"></image>
		</view>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad,onUnload } from '@dcloudio/uni-app';
const isFullScreen = ref(false);
const windowWidth = ref('100%');
const windowHeight = ref('500rpx');
let _windowWidth,_windowHeight;

const subNVue = uni.getSubNVueById('controlBottom')
const subNVueRight = uni.getSubNVueById('controlRight')
const subNVueNav = uni.getSubNVueById('controlNav')



// subNVueNav.onMessage((res) => {  
//     const data = res.data;
// 	if(data.type  == 'back') {
// 		subNVue.hide('none', 0)
// 		subNVueRight.hide('none', 0)
// 		subNVueNav.hide('none', 0)
// 		plus.navigator.setFullscreen(false);
// 		plus.navigator.showSystemNavigation();
// 		// #ifdef APP-PLUS
// 		plus.screen.lockOrientation('portrait-primary');
// 		// #endif
// 	}
// });

onLoad(()=>{
	// #ifdef APP-PLUS
	 // plus.screen.lockOrientation('default'); 
	// #endif
	uni.onWindowResize(windowResizeCallback);
	subNVue.hide('none', 300)
	subNVueRight.hide('none', 300)
	subNVueNav.hide('none', 300)
	plus.navigator.setFullscreen(false);
	plus.navigator.showSystemNavigation();
	
	uni.$on('subNVueNav', (data) => {
	    const type = data.type;
		console.log(type)
		if(type == 'back') {
			subNVue.hide('none', 0)
			subNVueRight.hide('none', 0)
			subNVueNav.hide('none', 0)
			plus.navigator.setFullscreen(false);
			plus.navigator.showSystemNavigation();
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		}
	})
})
onUnload(()=>{
	uni.offWindowResize(windowResizeCallback);
	subNVue.hide('none', 0)
	subNVueRight.hide('none', 0)
	subNVueNav.hide('none', 0)
	plus.navigator.setFullscreen(false);
	plus.navigator.showSystemNavigation();
	// #ifdef APP-PLUS
	plus.screen.lockOrientation('portrait-primary');
	// #endif
	uni.$off('subNVueNav')
})

const pageBack = ()=>{
	uni.navigateBack()
}

const windowResizeCallback = (res) => {
  console.log('变化后的窗口宽度=' + res.size.windowWidth)
  console.log('变化后的窗口高度=' + res.size.windowHeight)
	_windowWidth = res.size.windowWidth;
	_windowHeight = res.size.windowHeight;
	if(_windowWidth>_windowHeight){
		windowWidth.value =  _windowWidth+'px'
		windowHeight.value =  _windowHeight+'px'
		isFullScreen.value = true;
		
		// subNVue.setStyle({
		//     bottom: '0',  
		//     left: '0',  
		//     width: _windowWidth+'px',  
		//     height : '50px'
		// })
		// subNVueRight.setStyle({
		//     top: '0',  
		//     right: '0',  
		//     width: '50px',  
		//     height : '100%'
		// })
		subNVue.show('slide-in-bottom', 50,()=>{
			console.log('subNVue 原生子窗体显示成功');
		})
		subNVueRight.show('slide-in-right', 50,()=>{
			console.log('subNVueRight 原生子窗体显示成功');
		})
		subNVueNav.show('slide-in-top', 50,()=>{
			console.log('subNVueNav 原生子窗体显示成功');
		})
		plus.navigator.hideSystemNavigation();
		plus.navigator.setFullscreen(true);
	}else{
		isFullScreen.value = false;
		windowWidth.value = _windowWidth+'px';
		windowHeight.value = '500rpx';
		subNVue.hide('fade-out', 300)
		subNVueRight.hide('fade-out', 300)
		subNVueNav.hide('fade-out', 300)
		plus.navigator.setFullscreen(false);
		plus.navigator.showSystemNavigation();
	}
}

const onPlay = ()=>{
	console.log('play')
	
}

const videoErrorCallback = function (e) {
  console.log('视频错误信息:', e.detail.errMsg)
}

const onFullScreenChange = (e)=>{
	isFullScreen.value = true;
	console.log(e)


}

const toggleLandscape =()=> {
  // Android设备
  if (uni.getSystemInfoSync().platform === 'android') {
    // 设置横屏
		// #ifdef APP-PLUS
    plus.screen.lockOrientation('landscape');
		// #endif
    // 可以选择设置为横屏时的特定方向，例如 'landscape-unique'
  }
  // iOS设备
  else if (uni.getSystemInfoSync().platform === 'ios') {
    // 设置横屏
		// #ifdef APP-PLUS
	    plus.screen.setOrientation('landscape');
		// #endif
  }
}

const fullScreen = () => {
	toggleLandscape()
  // uni.navigateTo({
  //   url: '/pages/index/device-view_landscape/index'
  // })
}
// #ifdef APP-PLUS
// plus.screen.unlockOrientation();
// plus.screen.lockOrientation("portrait-primary");
// plus.navigator.setFullscreen(false)
// plus.navigator.showSystemNavigation()
// #endif
</script>

<style lang="scss" scoped>
.status_bar {
	background-color: #000;
}
.landscape_page {
	position: absolute;
	height: calc(43.81rpx * 2);
	height: calc(43.81rpx * 2 + constant(safe-area-inset-top));
	height: calc(43.81rpx * 2 + env(safe-area-inset-top));
	padding-left: 16.55rpx;
	padding-right: 16.55rpx;
}
.custom-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		top: calc(43.81rpx * 2 + var(--status-bar-height));
		// padding-left: 35rpx;
		// padding-right: 35rpx;
}
.video-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.control-bar-1 {
  background: #ee490d;
  background-image: linear-gradient(90deg, #ff6623 17%, #f22e40 91%);
	width: 750rpx;
  height: 100.47rpx;
}
.control-bar-2 {
	width: 750rpx;
	height: 122.08rpx;
	background: #FFFFFF;
}

.control-bar-3 {
	margin-top:27rpx;
	width: 750rpx;
	background: #FFFFFF;
	padding: 76rpx;
}
</style>
